<template>
  <header>
    <h1>帮助中心</h1>
  </header>
  <main>
    <section>
      <h2>常见问题</h2>
      <div class="accordion">
        <button class="accordion-btn" @click="ques1 = !ques1">问题1：如何注册账号？</button>
        <div v-if="ques1" class="accordion-panel">
          <p>要注册账号，请点击登录页面右上角的“注册帐号”按钮，然后填写您的信息并按照提示完成注册。</p>
        </div>
        <button class="accordion-btn" @click="ques2 = !ques2">问题2：如何下单购买商品？</button>
        <div v-if="ques2" class="accordion-panel">
          <p>要下单购买商品，请先登录您的账号，然后浏览您喜欢的商品，选择数量和其他选项，最后点击“加入购物车”或“立即购买”按钮。</p>
        </div>
        <!-- 添加更多常见问题 -->
      </div>
    </section>
    <section>
      <h2>联系我们</h2>
      <p>如果您在使用我们的网站过程中遇到任何问题，或者有任何建议或意见，请随时联系我们的客服团队：</p>
      <ul>
        <li>Email: <a href="mailto:2538695906@qq.com">2538695906@qq.com</a></li>
        <li>电话: 136-8083-1330</li>
      </ul>
    </section>
  </main>
  <footer>
    <img src="../../assets/logo.png" />
    <p>品优购 &copy; 2024</p>
  </footer>
</template>

<script setup>
import { ref } from 'vue'

const ques1 = ref(false)
const ques2 = ref(false)
</script>

<style scoped>
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

h1 {
  margin: 0;
}

main {
  padding: 20px;
}

section {
  margin-bottom: 30px;
}

h2 {
  color: #333;
}

ul {
  list-style: none;
  padding: 0;
}

footer {
  color: #999;
  text-align: center;
  padding: 20px;
  margin-top: 30px;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}

/* Accordion styles */
.accordion-panel {
  padding: 10px;
}

.accordion-btn {
  background-color: #f4f4f4;
  color: #333;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: background-color 0.3s ease;
}

.accordion-btn:hover {
  background-color: #ddd;
}

.active {
  background-color: #ddd;
}

img {
  width: 500px;
  height: 100px;
  object-fit: cover;
}

a {
  color: #999;
}
</style>
